<script setup>

</script>

<template>
  <div id="mainTitle">
    <div class="wrap">
      <div class="logo">
        <img src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/src_img/logo1.png" alt="logo">
      </div>

      <div class="account">
        <div class="headimg">
          <a href="#"><span class="iconfont icon-yonghu"></span></a>
        </div>
        <button class="login">登录</button>
        <button class="register">注册</button>
      </div>
      <div class="search">
        <input type="text" placeholder="茶杯犬">
        <button class="iconfont icon-sousuo"></button>
      </div>
    </div>
  </div>
</template>

<style scoped>
#mainTitle{
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #8e8d8d;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
}
.logo img{
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.search{
  float: right;
  width: 296px;
  height: 100px;
}
.search input{
  width: 244px;
  height: 50px;
  float: left;
  border: 1px solid #3167EB;
  border-right: 0px;
  box-sizing: border-box;
  margin-top: 25px;
  padding: 0 10px;
  border-radius: 10px 0px 0px 10px;
  font-size: 15px;
}
.search button{
  width: 52px;
  height: 50px;
  float: right;
  border: 1px solid #3167EB;
  margin-top: 25px;
  background-color: #3167EB;
  color: #fff;
  border-radius: 0px 10px 10px 0px;
}
.search button:hover{
  background-color: #7ea0f4;
  border: #7ea0f4;
}
.account{
  float: right;
  width: 310px;
  height: 100px;
  margin-left: 100px;
}
.account .headimg{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  float: left;
  border: 2px solid rgb(112, 112, 112);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 5px;
  margin: 20px;
}
.account .headimg .iconfont{
  color: #8f9091;
  font-size: 30px;
}
.account .headimg a{
  margin-top: 2px;
}
.account .login{
  width: 100px;
  height: 40px;
  border: 2px solid #3167EB;
  margin-top: 30px;
  background-color: #3167EB;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
  color: #fff;
  border-radius: 10px;

}
.account .login:hover{
  background-color: #7ea0f4;
  border: #7ea0f4;
}
.account .register{
  width: 100px;
  height: 40px;
  border: 2px solid #3167EB;
  margin-top: 30px;
  background-color: #fff;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
  color: #3167EB;
  border-radius: 10px;
}
.account .register:hover{
  background-color: #7ea0f4;
}
</style>
